<template>
    <div v-loading="vLoading" element-loading-text="拼命加载中">
        <div>
        <el-button type="primary" plain @click="open=>{createDialogVisible=true;reviseData={};}" style="margin-bottom: 2px;" >新增</el-button>
        </div>
        <el-table :data="tableData" border tooltip-effect="dark" style="width: 100%">
            <el-table-column prop="hrId" label="hrID" width="70">
            </el-table-column>
            <el-table-column prop="hrName" label="姓名" width="100">
            </el-table-column>
            <el-table-column prop="account" label="账号" width="150">
            </el-table-column>
            <el-table-column prop="gender" label="性别" width="50">
            </el-table-column>
            <el-table-column prop="telephone" label="电话" width="150">
            </el-table-column>
            <el-table-column prop="email" label="邮箱" width="200">
            </el-table-column>
            <el-table-column label="注册日期" width="200">
                <template slot-scope="scope">{{ scope.row.registerTime }}</template>
            </el-table-column>
            <el-table-column  label="状态" width="70">
                <template slot-scope="scope">{{  scope.row.status == 0 ? "正常" :
                        "禁用" }}</template>
            </el-table-column>
            <el-table-column label="操作" >
                <template slot-scope="scope">
                    <el-button @click="reviseDialogHandler(scope.row)" type="text">编辑</el-button>
                    <el-button @click="statusChangeClick(scope.row)" type="text">{{ scope.row.status == 0 ? "禁用" :
                        "启用" }}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 修改的 -->
        <el-dialog title="编辑" :visible.sync="reviseDialogVisible" width="30%" >
            <el-form label-width="80px" v-model="reviseData">
                <el-form-item label="hr姓名">
                    <el-input v-model="reviseData.hrName"></el-input>
                </el-form-item>
                <el-form-item label="账号">
                    <el-input v-model="reviseData.account"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="reviseData.password"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="reviseData.telephone"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="reviseData.email"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-input v-model="reviseData.gender" maxlength="1"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="reviseDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitRevisionHandler()">修 改</el-button>
            </span>
        </el-dialog>
<!-- 创建 -->
        <el-dialog title="创建" :visible.sync="createDialogVisible" width="30%">
            <el-form label-width="80px" v-model="reviseData">
                <el-form-item label="hr姓名">
                    <el-input v-model="reviseData.hrName"></el-input>
                </el-form-item>
                <el-form-item label="账号">
                    <el-input v-model="reviseData.account"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="reviseData.password"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="reviseData.telephone"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="reviseData.email"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="reviseData.gender">
                        <el-option label="男" :value="'男'"></el-option>
                        <el-option label="女" :value="'女'"></el-option>
                    </el-select></el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="reviseData.status">
                        <el-option label="启用" :value="0"></el-option>
                        <el-option label="禁用" :value="1"></el-option>
                    </el-select></el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="createDialogVisible = false;">取 消</el-button>
                <el-button type="primary" @click="submitCreationHandler()">创 建</el-button>
            </span>
        </el-dialog>
        <div class="block custom-pagination" style="text-align: center;margin-top: 10px;">
        <el-pagination :page-size="pageStrategy.pageSize" @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[1, 4, 7, 10]"
                        :current-page="pageStrategy.pageNum"  :total="total" layout="sizes,prev, pager, next">
        </el-pagination>
        </div>

    </div>
</template>

<script>
import { changeStatus, getSubHrs, updateInfo } from '@/api/hr';
import { addSubHr } from '@/api/self';


export default {
    data() {
        return {
            vLoading:false,
            total:null,
            pageStrategy:{
                pageNum:1,
                pageSize:7,
            },
            reviseDialogVisible: false,
            createDialogVisible: false,
            reviseData: {
            },
            tableData: []
        }
    },
    methods: {
        statusChangeClick(row) {
            row.status = row.status == 1 ? 0 : 1;
            changeStatus({"hrId":row.hrId}).then(res=>{
                if (res.code==200) {
                     row.status == 1?this.$message.success("禁用成功"):this.$message.success("启用成功")
                }
            }
        )
        },
        handleCurrentChange(val){
            this.pageStrategy.pageNum=val
            this.query()
        },
        handleSizeChange(val){
            this.pageStrategy.pageSize=val
            this.pageStrategy.pageNum=1
            this.query()
        },
        reviseDialogHandler(row) {
            this.reviseDialogVisible = true;
            this.reviseData = {...row};
        },
        submitRevisionHandler(){
            this.reviseDialogVisible = false;
            // 提交修改
            updateInfo(this.reviseData).then(res=>{
                if (res.code==200) {
                    this.$message.success("修改成功")
                    this.query()
                }
            })
        },
        submitCreationHandler(){
            this.createDialogVisible = false;
            //提交创建
            this.reviseData.companyId=this.$store.state.companyId
            console.log(this.reviseData);
            addSubHr(this.reviseData).then(res=>{
                if (res.code==200) {
                    this.$message.success("创建成功")
                    this.query()
                }
            })
        },
        query(){
            this.vLoading=true
            getSubHrs({"companyId":this.$store.state.companyId,
            "pageNum":this.pageStrategy.pageNum,
            "pageSize":this.pageStrategy.pageSize,
            }).then(res=>{
                this.tableData=res.data.list;
                this.vLoading=false
            })
        }
    },
    mounted(){
        if (this.$store.state.companyId==null) {
            this.$message.error("您还没有通过认证")
            this.$router.push("/main/mine")
        }else{
            if (this.$store.state.identity!=0) {
            this.$message.error("您不是主账号")
            this.$router.push("/main/mine")
        }else{
            this.query()
        }
        }
        
        
    }
}
</script>


<style></style>